<template>
  <el-drawer
    v-model="dialogFormVisible"
    :before-close="handleClose"
    destroy-on-close
    direction="rtl"
    size="87%"
    title="通知公告编辑页面"
    @close="close"
    @opened="opened"
  >
    <div v-loading="formLoading" class="formbody">
      <el-form
        ref="formRef"
        class="demo-ruleForm"
        :inline="true"
        label-width="130px"
        :model="noticeList"
        :rules="rules"
        status-icon
      >
        <el-form-item label="标题" prop="noticeTitle">
          <el-input v-model="noticeList.noticeTitle" />
        </el-form-item>
        <el-form-item label="通知类型" prop="noticeType">
          <el-select v-model="noticeList.noticeType" clearable placeholder="请选择通知类型">
            <el-option v-for="item in NoticeTypes" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="启停状态" prop="status">
          <el-select v-model="noticeList.status" clearable placeholder="请选择启停状态">
            <el-option v-for="item in EnableStatus" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="通知内容">
          <div style="border: 1px solid #cccccc">
            <Toolbar :default-config="toolbarConfig" :editor="editorRef" style="border-bottom: 1px solid #cccccc" />
            <Editor
              v-model="valueHtml"
              :default-config="editorConfig"
              style="height: 300px; overflow-y: hidden"
              @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <el-button type="primary" @click="save">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { doUpdate, getDetails, getLocalStorage } from "@/api/mains";
import { succMsg } from "@/utils/MessageUtils";

export default defineComponent({
  name: "NoticeEdit",
  components: { Editor, Toolbar },
  emits: {
    fetchData: null //fetchData事件没有检验
  },

  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();

    const state = reactive({
      editor: null,
      formLoading: true,
      formRef: null,
      url: "system/notice",
      noticeList: {},
      NoticeTypes: [],
      EnableStatus: [],
      //数据验证条件
      rules: {
        noticeTitle: [{ required: true, trigger: "blur", message: "标题不能为空" }],
        noticeType: [{ required: true, trigger: "blur", message: "请选择通知类型" }],
        status: [{ required: true, trigger: "blur", message: "请选择启停状态" }]
      },
      dialogFormVisible: false
    });

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 内容 HTML
    const valueHtml = ref("");
    const toolbarConfig = {};
    const editorConfig = { placeholder: "请输入内容..." };

    const handleCreated = editor => {
      editorRef.value = editor;
    };

    const showDialog = row => {
      state.noticeList.id = row.id;
      state.dialogFormVisible = true;
      getNoticeList();
      //缓存枚举数据
      state.NoticeTypes = getLocalStorage().NoticeTypes;
      state.EnableStatus = getLocalStorage().sys_notice_status;
    };

    const getNoticeList = async () => {
      state.formLoading = true;
      const res = await getDetails(state.url, state.noticeList.id);
      state.formLoading = false;
      state.noticeList = res.data;
      console.info(res);
      valueHtml.value = state.noticeList.noticeContent;
      // state.editor.txt.html(state.noticeList.content)
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      state.editor = editorRef.value;
      if (state.editor == null) return;
      state.editor.destroy();
    });

    const close = () => {
      state["formRef"].resetFields();
      state.noticeList = [];
      state.dialogFormVisible = false;
      valueHtml.value = "";
    };

    const save = () => {
      state["formRef"].validate(async valid => {
        if (valid) {
          state.noticeList.noticeContent = valueHtml.value;
          state.formLoading = true;
          const { code, msg } = await doUpdate(state.url, state.noticeList);
          state.formLoading = false;
          if (code == 200) {
            succMsg(msg);
            close();
            emit("fetchData");
          }
        }
      });
    };

    //关闭
    const handleClose = done => {
      proxy.$baseConfirm("确定退出编辑？", null, () => {
        done();
      });
    };

    return {
      ...toRefs(state),
      showDialog,
      close,
      save,
      editorRef,
      handleClose,
      getNoticeList,
      valueHtml,
      editorConfig,
      handleCreated,
      toolbarConfig
    };
  }
});
</script>
<style lang="scss" scoped>
#editor—wrapper {
  z-index: 100; /* 按需定义 */
  border: 1px solid #cccccc;
}
#toolbar-container {
  border-bottom: 1px solid #cccccc;
}
#editor-container {
  height: 500px;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 87%;
  padding: 10px;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #dcdfe6;
}
.footer button {
  width: 25%;
  line-height: 20px;
}
.el-form {
  padding: 2% 0 10%;
  line-height: 20px;
}
.formbody {
  position: absolute;
  inset: 65px 0 55px;
  overflow-x: hidden;
  overflow-y: scroll;
  :deep() {
    .el-form-item,
    .el-input,
    .el-select,
    .el-textarea {
      width: 100% !important;
    }
    .el-form-item__content {
      width: 88%;
    }
  }
}
</style>
